<template>
  <u--form :model="form" ref="uForm" :rules="rules" labelPosition="top">
    <view class="app-container">
      <view class="addbankinfo-container">
        <div class="form-item">
          <label>银行卡号</label>
          <u-form-item label="" prop="bankNo">
            <u-input placeholder="请输入您的银行卡号" v-model="form.bankNo"></u-input>
          </u-form-item>
        </div>
        <div class="form-item">
          <label>开户行</label>
          <u-form-item label="" prop="bankBranch">
            <u-input placeholder="请输入您的银行卡开户行" v-model="form.bankBranch"></u-input>
          </u-form-item>
        </div>
        <div class="form-item">
          <label>持卡人姓名</label>
          <u-form-item label="" prop="cardName">
            <u-input placeholder="请输入持卡人姓名" v-model="form.cardName"></u-input>
          </u-form-item>
        </div>
        <div class="form-item">
          <label>手机号</label>
          <u-form-item label="" prop="phone">
            <u-input placeholder="请输入您的手机号码" v-model="form.phone"></u-input>
          </u-form-item>
        </div>
        <div class="form-item">
          <u-form-item label="" prop="code">
            <u-input v-model="form.code">
              <template slot="suffix">
                <text @click="onClick" style="color: #00b6fc; font-size: 14px">发送验证码</text>
              </template>
            </u-input>
          </u-form-item>
        </div>
        <u-button text="立即绑定" shape="circle" type="primary" @click="submit"></u-button>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
  </u--form>
</template>

<script>
import { bankPayment,getUserInfo } from '@/api/api.js'
export default {
  data() {
    return {
      form: {
        bankNo: '',
        bankBranch: '',
        cardName: '',
        phone: '',
        code: ''
      },
      rules: {
        bankNo: [
          {
            required: true,
            message: '请输入您的银行卡号',
            trigger: ['blur', 'change']
          }
        ], bankBranch: [
          {
            required: true,
            message: '请输入您的银行卡开户行',
            trigger: ['blur', 'change']
          }
        ], cardName: [
          {
            required: true,
            message: '请输入您的手机号码',
            trigger: ['blur', 'change']
          }
        ], code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  onLoad(item) {
    this.form.bankName = item.bankName
  },
  methods: {
    submit() {
      this.$refs.uForm.validate().then(res => {
        bankPayment({ ...this.form }).then(res => {
          if (res.code === 10000) {
			this.$store.dispatch('userInfo')
            uni.switchTab({
            	url:'/pages/me/me'
            })
          } else {
            this.$refs.uToast.show({
              type: 'error',
              icon: false,
              message: res.message,
            })
          }
        })
      }).catch(errors => {
      })
    },
	onClick(){
		
	}
  }
}
</script>

<style lang="scss">
.addbankinfo-container {
  background-color: #fff;
  padding: 14px;
  height: 100vh;

  .form-item {
    margin-bottom: 16px;

    &:last-of-type {
      margin-bottom: 36px;
    }

    label {
      line-height: 22px;
      font-size: 16px;
      position: relative;

      &:after {
        content: '';
        width: 16px;
        height: 16px;
        position: absolute;
        right: -16px;
        top: 3px;
        background: url('@/static/icons/bitian.svg') no-repeat;
      }
    }

    .u-input {
      margin-top: 12px;
      background-color: #f5f6f7;
      border-radius: 8px;

      &::placeholder {
        color: #c7c7c7;
      }
    }
  }
}
</style>
